<template>
  <div class="detail">
    <my-header>
      <div class="header-box">
        <router-link to="/myTask">
          <div class="jiantou"></div>
        </router-link>
        <span>任务详情</span>
      </div>
    </my-header>
    <van-field label="任务分类" :placeholder="`${data.classify}`" readonly />
    <van-field label="分类介绍" :placeholder="`${data.introduce}`" readonly />

    <van-field label="任务简介" :placeholder="`${data.synopsis}`" readonly />

    <van-field label="任务标题" :placeholder="`${data.title}`" readonly />

    <van-field label="任务单价(元)" :placeholder="`${data.price}`" type="number" readonly />

    <van-field label="链接信息" :placeholder="`${data.link}`" readonly />

    <van-field label="任务步骤" :placeholder="`${data.step}`" readonly />
    <div class="litu">
      <p>
        <span>审核例图</span>
      </p>
      <van-uploader
        v-model="fileList"
        multiple
        :deletable="false"
        :max-count="`${fileList.length}`"
      />
    </div>
    <div class="taskFinish" v-if="isTake">
      <h2>任务截图:</h2>
      <van-uploader v-model="pic" multiple :max-count="`${fileList.length}`" />
      <div class="present-box">
        <button class="present" @click="present">提交结果</button>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import axios from "axios";
import MyHeader from "../components/MyHeader.vue";
// 局部
import Vue from "vue";
import { Dialog } from "vant";
import { baseURL } from '../http/require';
// 全局注册
Vue.use(Dialog);
export default {
  components: { MyHeader, [Dialog.Component.name]: Dialog.Component },
  data() {
    return {
      data: "",
      fileList: [],
      isTake: true,
      pic: []
    };
  },
  watch: {
    task: {
      deep: true,
      immediate: true,
      handler(n, o) {
        // console.log({n});
      }
    },
    user: {
      deep: true,
      immediate: true,
      handler(n, o) {
        // console.log({n});
        // if(n.userName =='undefined' || n.userName == undefined){
        //     this.isShow = false
        // }else {
        //     this.isShow = true;
        // }
      }
    }
  },
  methods: {
    init() {
      let taskId = this.task.taskId;
      // console.log(taskId);
      axios
        .get(`${baseURL}/task/detail?taskId=${taskId}`)
        .then(response => {
          // console.log(response.data);
          if (response.data.code == 200) {
            let [data] = response.data.rows;
            this.data = data;
            // console.log(this.data);
            this.fileList.push({ url: this.data.url });
          }
        });
    },
    present() {
      let taskId = this.task.taskId;
      let balance = this.task.price-0 + this.user.balance - 0;
      let id = this.user.id;
      axios
        .post(
          `${baseURL}/myTask/updataIsFinish`,
          { taskId: taskId, isFinish: true },
          {
            headers: "application/x-www-form-urlencoded"
          }
        )
        .then(response => {
          if (response.data.code == 200) {
            Dialog.alert({
              message: response.data.msg
            }).then(() => {
              axios.post(
                `${baseURL}/user/updataBalance`,
                { id: id, balance: balance },
                {
                  headers: "application/x-www-form-urlencoded"
                }
              )
              .then(response =>{
                if(response.data.code == 200) {
      this.$store.dispatch('user/setBalanceAsync',balance)

                }
              })
              this.$router.push("/myTask");
            });
          }
        });
    }
    
  },
  computed: {
    ...mapState(["task"]),
    ...mapState(["user"])
  },
  created() {
    this.init();
  }
};
</script>
<style lang="scss" scoped>
@import "../css/reset.css";
.detail {
  width: 100%;
  .header-box {
    width: 100%;
    display: flex;
    align-items: center;
    .jiantou {
      flex-grow: 1;
      width: 15px;
      height: 15px;
      border-left: 3px solid #fff;
      border-top: 3px solid #fff;
      transform: rotate(320deg);
      margin-left: 15px;
    }
    span {
      flex-grow: 1;
    }
  }
  .litu {
    width: 100%;
    height: 150px;
    p {
      font-size: 14px;
      height: 30px;
      line-height: 30px;
      padding-left: 15px;
      display: flex;
      span:nth-child(1) {
        flex-basis: 28%;
        font-weight: 300;
      }
      span:nth-child(2) {
        color: #ccc;
      }
    }
  }
  .btn_box {
    width: 90%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    .btn {
      width: 90%;
      height: 50px;
      border: 0;
      font-size: 20px;
      color: #fff;
      background-color: green;
    }
  }
  .taskFinish {
    width: 95%;
    margin: 0 auto;
    .present-box {
      width: 90%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      .present {
        width: 100%;
        height: 50px;
        background-color: #faca2a;
        color: #fff;
        border: 0;
        font-size: 20px;
      }
    }
  }
}
</style>